<template>
  <div style="padding: 15px 25px 0px">
    <!-- 验工计价 -->
    <TCollapse title="查询条件" style="width:100%;">
      <el-form
        :model="searchInfo"
        label-width="160px"
        class="pms-details"
        size="mini"
        :inline="true"
      >
        <el-row :gutter="24">
          <el-col :span="6" style="">
            <el-form-item label="服务编码" style="width:100%;" prop="serviceCode">
              <el-input v-model="searchInfo.serviceCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="">
            <el-form-item label="服务名称" style="width:100%;" prop="serviceName">
              <el-input v-model="searchInfo.serviceName" />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: flex-end;margin-top: 4px;" :offset="6">
            <el-button type="primary" class="white-color pms-button-primary" @click="handleSearch">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </TCollapse>
    <TCollapse title="验工计价" style="width:100%;">
      <el-row :gutter="10" type="flex" class="content-box mlg marginBottom14" justify="start">
        <el-col :span="1.5" style="line-height:25px;text-align: left;">
          <div id="messBox">下列服务编码还未返回预估单：{{ coding }}</div>
          <div class="colorRed">预估单未返回时请确认以下操作是否已完成：</div>
          <div class="colorRed">（1）请与地市商合岗确认对应的服务编码是否已经采购下单（选址费、赔补费、测绘费、工程签证类服务需【项目经理】跳转【商合交易系统】去下单，具体操作路径：PMS系统-【综合查询】-【选址/赔补/测绘/签证费下单】）。</div>
          <div class="colorRed">（2）如果已下单，请项目经理到商合交易系统完成收货（操作路径：我的业务/我的账户/订单管理），收货之后系统会在1小时左右推送预估单到PMS。可在订单详情页查询最新推送状态（查看路径：查看/查看订单报账）。</div>
          <div class="colorRed">（3）不需要的服务模块可通过项目设计变更删除。操作手册请见【知识管理】平台，搜索“设计变更”。</div>
          <div class="colorRed">（4）本期验工计价数量与本期验工计价金额为负数时，表示该服务为冲销验工计价；为正数时，表示该服务为新增验工计价。</div>
        </el-col>
      </el-row>
      <el-table
        ref="singleTable"
        :data="detailDataTwo"
        style="width: 100%"
        border
        :header-cell-style="{
          background: '#F5F5F5',
          color: '#333333'
        }"
      >
        <el-table-column align="center" type="index" width="50" label="序号" />
        <el-table-column align="center" prop="siteId" label="站址编码" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="serviceCode" label="服务编码" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="serviceName" label="服务名称" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="supplier" width="90" label="供应商名称" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderCode" label="订单编码" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="contractCode" label="合同编码" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="shNum" width="80" label="商合预占数" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price" width="80" label="单价(元)" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="spuUnitAcc" width="80" label="物料精度" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="shMoney" width="80" label="商合预占金额(元)" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sumNum" width="80" label="累计验工数量" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sumMoney" width="80" label="累计验工金额(元)" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderState" label="订单状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.pid =='0' ? orderStateDictionaries(scope.row.orderState):'' }}</template>
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="surplusNum" width="80" label="可发起验工数量" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="currentInspectionNum" width="80" label="本期验工数量" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="currentInspectionMoney" width="80" label="本期验工金额(元)" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="currentDeductionMoney" width="80" label="本期验工扣款金额(元)" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumns" align="center" prop="subNicheCode" width="80" label="子商机编码">
                    <template slot="header" slot-scope="{ column }">
                      <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
                    </template>
                  </el-table-column>
        <el-table-column v-if="newZlSoftWort" align="center" prop="shareStartDate" width="80" label="摊销起始日期">
                    <template slot="header" slot-scope="{ column }">
                      <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
                    </template>
         </el-table-column>
         <el-table-column v-if="newZlSoftWort" align="center" prop="shareEndDate" width="80" label="摊销终止日期">
                    <template slot="header" slot-scope="{ column }">
                      <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
                    </template>
         </el-table-column>          
        <el-table-column align="center" prop="projectProGress" width="80" label="项目进度(%)">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" header-align="center" prop="payType" :formatter="payTypeDictionaries" width="80" label="付款类型" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="isPush" :formatter="isPushDictionaries" width="80" label="推送状态" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="operationTime" width="80" label="验工操作时间" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="operationUserName" width="80" label="验工操作人" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{ column }">
            <el-tooltip effect="dark" :content="column.label" placement="top"><div class="header-tooltip">{{ column.label }}</div></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </TCollapse>
  </div>
</template>
  <script>
    import { queryinsValDetailsByService, getServiceReceInspection,isShowSubCode ,getPrjDetail} from '@/api/checkoutValuation'
    import TCollapse from '@/components/basic/TCollapse.vue'
    // 系统常量配置
    import SysConst from '@/common/const'
    export default {
      name: 'CheckoutValuationInDetailsvue', components: {
        TCollapse
      },
      data() {
        return {
          // 分页信息
          pageParam: {
            pageSize: SysConst.PAGESIZE,
            pageSizes: SysConst.PAGESIZES,
            currentPage: SysConst.CURRENT_PAGE,
            total: SysConst.TOTAL,
            layout: SysConst.TABLE_LAYOUT
          },
          detailData: [],
          detailDataTwo: [],
          urlList: {},
          type: '',
          koFaShow: '',
          coding: [], // 返回服务编码
          searchInfo: {
              serviceCode: '',
              serviceName: ''
          },
          showColumns:true,
          prjDetail:{}
        }
      },
      computed:{
        // 智联服务成本展示时间
         newZlSoftWort(){
            return this.prjDetail.isNewbusiness==='1'&&['25'].includes(this.prjDetail.buildModes)&&this.prjDetail.prjType==='W'
        },
      },
      created() {
        var urlVal = window.location.href
        this.urlList = this.GetRequest(urlVal)
        this.listDataTwo()
        // 公共的查询哪些服务编码没有返回预估单
        getServiceReceInspection({ prjId: this.urlList.prjId }).then(res => {
            if (res.code === '200' && res.data.length > 0) {
                res.data.map((v) => {
                    this.coding.push(v)
                })
                this.coding = this.coding.join(',') + '。'
            } else if (res.data.length === 0) {
            this.coding = '无。'
            } else {
              console.log('[]')
            }
        })
        this.getInitPriDetail()
      },
      methods: {
        async getInitPriDetail() {
             const res = await getPrjDetail({prjId:this.urlList.prjId})
              this.prjDetail = res.data
            const {code,data} = await isShowSubCode({prjId:this.urlList.prjId})
            if (+code === 200&&(+data===0)) {
                this.showColumns = false
            }
        },
        handleSearch() {
          this.listDataTwo()
        },
        handleReset() {
            this.searchInfo.serviceCode = ''
            this.searchInfo.serviceName = ''
            this.listDataTwo()
        },
        GetRequest(url) {
          var theRequest = {}
          if (url.indexOf('?') !== -1) {
              var str = url.substr(1)
              var strs = str.split('?')
              var strsList = strs[1].split('&')
              for (var i = 0; i < strsList.length; i++) {
                theRequest[strsList[i].split('=')[0]] = strsList[i].split('=')[1]
              }
          }
          return theRequest
        },
        // 初始化列表数据
        async listDataTwo() {
          var dataVal = {
              prjId: this.urlList.prjId,
              serviceCode: this.searchInfo.serviceCode,
              serviceName: this.searchInfo.serviceName
            }
          const { code, data } = await queryinsValDetailsByService(dataVal)
          if (code === '200') {
            this.detailDataTwo = data
          }
        },

        // 推送状态字典转换
        isPushDictionaries(row) {
          switch (row.isPush) {
              case '0':
              return '未推送'
              case '1':
              return '已推送'
              case '2':
              return '推送超时'
              case '3':
              return '部分推送'
              default:
              break
          }
        },
        // 付款类型字典转换
        payTypeDictionaries(row) {
          switch (row.payType) {
              case 'FIRST':
              return '首付款（含安全生产费）'
              case 'PROGRESSING':
              return '进度款'
              case 'LOSS':
              return '损失款'
              default:
              break
          }
        },
        // 订单状态字典转换
        orderStateDictionaries(row) {
          switch (row) {
              case '1':
              return '有效'
              case '0':
              return '无效'
              case '-1':
              return '冻结'
              default:
              break
          }
        }
      }
    }
  </script>
  <style scoped lang="scss">
    ::v-deep .el-collapse-item__wrap{
      padding:0px 10px !important;
    }
    ::v-deep .el-collapse .el-icon-arrow-right{
      display: none !important;;
    }
    .colorRed{
        color:red;
    }
    .el-upload--text {
      width: 100%;
    }
    .btnflex{
      display: flex;
      justify-content: space-between;
    }
    .header-tooltip {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #messBox {
      word-break: break-all;
    }
  </style>

